<template>
	<div>
		<div>
			<Form :formData="formData" :formConfig="formConfig" :rules="rules" btn="custom" :inline="true">
				<div>
					<el-button type="primary" @click="mysearch"> 查询 </el-button>
					<el-button type="primary" @click="add"> 新增 </el-button>
				</div>
			</Form>
		</div>
		<div>
			<Table :selection="true" :tableData="tableData" :tableconfig="tableconfig" @selectingTable="getTableSelecting" :tableHeight="330">
				<template #opration="{ scope }">
					<div>
						<el-button type="primary" :icon="Edit" circle @click="updateOp(scope.row)" />
						<el-button type="danger" :icon="Delete" circle @click="deleteOp(scope.row)" />
						<el-button type="warning" :icon="Star" circle @click="startOp(scope.row)" />
					</div>
				</template>
			</Table>
		</div>
		<div>
			<Pagination @currentChange="paginationCurrentChange" @sizeChange="paginationSizeChange" :total="total" />
		</div>
	</div>
	<el-dialog v-model="dialogTableVisible" title="user_opration" width="" destroy-on-close center :close-on-click-modal="false" :draggable="true">
		<div style="display: flex; justify-content: center">
			<Form :formData="formData1" :formConfig="formConfig1" :rules="rules1" @submit="func1" @cancel="func2"></Form>
		</div>
	</el-dialog>
</template>

<script setup>
	import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
	import { randomGeneratorVerificationCode, getUUID } from '@/utils';
	let type, curRow;
	// let v;

	function add() {
		for (let i = 1; i <= 4; i++) {
			formData1.value[i] = '';
		}
		type = 'add';
		dialogTableVisible.value = true;
	}
	const formData = ref({
		1: '',
	});
	const formConfig = ref([
		{
			key: '1',
			ele: 'input',
			label: '',
			placeholder: '请输入内容',
			// disabled: true,
			type: 'text',
			clearable: true,
			style: {
				width: '200px',
			},
			change: mysearch,
		},
	]);
	let tableData = ref([]);
	let arr;
	onMounted(() => {
		arr = new Array(1000).fill({}).map((v, i) => {
			return {
				id: getUUID(),
				name: randomGeneratorVerificationCode(),
				email: i,
				phone: Math.ceil(Math.random() * 1000),
				role: Math.ceil(Math.random() * 1000),
				status: Math.ceil(Math.random() * 1000),
				opration: '',
			};
		});
		total.value = arr.length;
		tableData.value = arr.slice(toValue(current.value), toValue(size.value));
	});
	let tableconfig = ref([
		{
			prop: 'name',
			label: '姓名',
			sortable: false,
			fixed: false,
			slot: false,
			width: '120px',
			visible: false,
		},
		{
			prop: 'email',
			label: '邮箱',
			sortable: false,
			fixed: false,
			slot: false,
			width: '120px',
			visible: false,
		},
		{
			prop: 'phone',
			label: '电话',
			sortable: false,
			fixed: false,
			slot: false,
			width: '120px',
			visible: false,
		},
		{
			prop: 'role',
			label: '角色',
			sortable: false,
			fixed: false,
			slot: false,
			width: '120px',
			visible: false,
		},
		{
			prop: 'status',
			label: '状态',
			sortable: false,
			fixed: false,
			slot: false,
			width: '120px',
			visible: false,
		},
		{
			prop: 'opration',
			label: '操作',
			sortable: false,
			fixed: false,
			slot: true,
			width: '420px',
			visible: false,
		},
	]);
	const rules = ref({});
	let total = ref();
	let size = ref(30);
	let current = ref(1);
	function paginationCurrentChange(v) {
		current.value = v;
		tableData.value = arr.slice(toValue(current.value), toValue(size.value));
	}
	function paginationSizeChange(v) {
		size.value = v;
		tableData.value = arr.slice(toValue(current.value), toValue(size.value));
	}
	function getTableSelecting(v) {
		console.log('列表选中项', v);

	}
	function mysearch() {
		let ar = toValue(tableData.value);
		if (toValue(formData.value[1])) {
			ar = ar.filter(v => {
				if (v.name.includes(formData.value[1])) {
					return true;
				} else {
					return false;
				}
			});
			tableData.value = ar || [];
		} else {
			tableData.value = arr || [];
		}
	}

	const dialogTableVisible = ref(false);
	function func1() {
		if (type == 'add') {
			console.log('确认');
			dialogTableVisible.value = false;
			ElMessage({
				message: '操作成功',
				type: 'success',
			});
			tableData.value.push({
				id: getUUID(),
				name: formData1.value[1],
				email: formData1.value[2],
				phone: formData1.value[3],
				role: formData1.value[4],
				status: Math.ceil(Math.random() * 1000),
				opration: '',
			});
		}

		if (type == 'update') {
			let ar = toValue(tableData.value);
			ar.forEach((v, i) => {
				if (toRaw(curRow).id == v.id) {
					tableData.value[i]['name'] = formData1.value[1];
					tableData.value[i]['email'] = formData1.value[2];
					tableData.value[i]['phone'] = formData1.value[3];
					tableData.value[i]['role'] = formData1.value[4];
				}
			});
			dialogTableVisible.value = false;
		}
	}
	function func2() {
		console.log('取消');
		dialogTableVisible.value = false;
	}
	let rules1 = ref({
		1: [{ required: true, message: '不能为空，请输入', trigger: 'change' }],
		2: [{ required: true, message: '不能为空，请输入', trigger: 'blur' }],
		3: [{ required: true, message: '不能为空，请输入', trigger: 'blur' }],
		4: [{ required: true, message: '不能为空，请输入', trigger: 'change' }],
	});
	let formData1 = ref({
		1: '',
		2: '',
		3: '',
		4: '',
	});
	let formConfig1 = ref([
		{
			key: '1',
			ele: 'input',
			label: '姓名',
			placeholder: '',
			disabled: true,
			type: 'text',
			clearable: true,
			style: {
				width: '500px',
			},
		},
		{
			key: '2',
			ele: 'input',
			label: '电话',
			placeholder: '',
			disabled: true,
			type: 'text',
			clearable: true,
			style: {
				width: '500px',
			},
		},
		{
			key: '3',
			ele: 'input',
			label: '邮箱',
			placeholder: '',
			disabled: true,
			type: 'text',
			clearable: true,
			style: {
				width: '500px',
			},
		},
		{
			key: '4',
			ele: 'input',
			label: '角色',
			placeholder: '',
			disabled: true,
			type: 'text',
			clearable: true,
			style: {
				width: '500px',
			},
		},
	]);
	function updateOp(row) {
		type = 'update';
		dialogTableVisible.value = true;
		let ar = toValue(tableData.value);
		ar.forEach((v, i) => {
			if (toRaw(row).id == v.id) {
				formData1.value[1] = tableData.value[i]['name'];
				formData1.value[2] = tableData.value[i]['email'];
				formData1.value[3] = tableData.value[i]['phone'];
				formData1.value[4] = tableData.value[i]['role'];
			}
		});
		curRow = row;
		console.log('update', toRaw(row));
	};
	function deleteOp(row) {
		let ar = toValue(tableData.value);
		ar = ar.filter(v => {
			if (toRaw(row).id == v.id) {
				return false;
			} else {
				return true;
			}
		});
		tableData.value = ar || [];
		ElMessage({
			message: '操作成功',
			type: 'success',
		});
		console.log('delete', toRaw(row));
	}
	function startOp(row) {
		ElMessage({
			message: '操作成功',
			type: 'success',
		});
		console.log('start', toRaw(row));
	}
</script>

<style scoped lang="scss"></style>
